<template>
	<view class="index">
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar"><view class="top_view"></view></view>
		<!-- #endif -->
		<view class="tabs"><u-tabs :list="list" :is-scroll="false" :current="current" active-color="#ee0a24" @change="change"></u-tabs></view>
		<view class="lists">
			<view class="p_10"><u-search placeholder="请输入搜索内容" v-model="search" :animation="true" @search="dosearch"></u-search></view>
			<block v-for="(v, k) in goodsList" :key="k">
				<view class="flex row_bet p_10">
					<image :src="v.goods_url" mode="" style="width: 240rpx;height: 240rpx;"></image>
					<view class="g_right flex row_bet col_top u-flex-1 m_l_10">
						<view class="">
							<view class="line-2" style="margin-bottom: 15rpx;">{{ v.title }}</view>
							<view class="fankuan" style="margin-bottom: 15rpx;">返款时间 {{ v.refund_time.slice(0, 11) }}</view>
							<view class="fukuan" style="margin-bottom: 15rpx;">
								付款
								<text class="bold" style="font-size: 28rpx; padding: 0 10rpx;">{{ v.payment_price }}</text>
								元
							</view>
							<view class="money flex row_bet col_center">
								<view class="">
									返款
									<text class="bold" style="padding: 0 10rpx;color: #ff5b00;font-size: 28rpx;">{{ v.refund_price }}</text>
									元
								</view>
								<u-link :href="v.refund_url" v-if="v.status != '待返款'">
									<view class="status">{{ v.status }}</view>
								</u-link>
								<u-link :href="v.refund_url" v-else>
									<view class="elsestatus">{{ v.status }}</view>
								</u-link>
							</view>
						</view>
						<view class="x" @click="dodel(v.id)"><u-icon name="close" color="gray" size="28"></u-icon></view>
					</view>
				</view>
			</block>
			<u-loadmore :status="status" :margin-top="40" :margin-bottom="0" bg-color="transparent" />
		</view>
		<u-popup v-model="show" mode="bottom" border-radius="25" :closeable="true">
			<view class="p_15 text_left">
				<u-button
					type="success"
					:custom-style="{
						width: '152rpx',
						marginTop: '40rpx'
					}"
					@click="show2 = true"
				>
					添加商品
				</u-button>
			</view>
		</u-popup>
		<u-popup v-model="show2" mode="bottom" border-radius="25">
			<view class="p_15 formbox">
				<view class="title">添加新商品</view>
				<u-form :model="form" ref="uForm" label-width="140rpx">
					<u-form-item label="商品名称"><u-input v-model="form.title" :placeholder-style="iptplsty" @blur="iptblur(1)" placeholder="请填写商品名称" /></u-form-item>
					<u-form-item label="商品图片">
						<u-input v-model="form.goods_url" :placeholder-style="iptplsty2" @blur="iptblur(2)" placeholder="请填写商品图片地址" />
					</u-form-item>
					<u-form-item label="上传图片">
						<!-- #ifndef H5 -->
						<u-upload :action="action" :file-list="fileList" :max-count="1" :custom-btn="true" @on-success="uploaded">
							<view slot="addBtn" class="flex row_center col_center " style="width: 160rpx; height: 160rpx;background-color: #F7F8FA;">
								<u-icon name="camera-fill" color="#DCDEE0" size="50"></u-icon>
							</view>
						</u-upload>
						<!-- #endif -->
						<!-- #ifdef H5 -->
						<view style="width: 100%;height: 292rpx;overflow: hidden;padding-bottom: 8rpx;">
							<!-- <web-view src="/hybrid/html/upload.html" style="width: 550rpx;height: 160rpx;z-index: 999999999;"></web-view> -->
							<!-- <view class="flex row_center col_center " style="width: 160rpx; height: 160rpx;background-color: #F7F8FA;" id="h5upload" @click="doupload2">
								<u-icon name="camera-fill" color="#DCDEE0" size="50"></u-icon>
							</view> -->
							<el-upload
								class="upload-demo"
								drag
								:action="action"
								:limit="1"
								:multiple="true"
								list-type="picture-card"
								:on-success="uploadedsuccess"
								:on-remove="doremove"
							>
								<i class="el-icon-upload"></i>
								<div class="el-upload__text">
									将文件拖到此处，或
									<em>点击上传</em>
								</div>
							</el-upload>
						</view>
						<!-- #endif -->
					</u-form-item>
					<u-form-item label="付款金额">
						<u-input v-model="form.payment_price" :placeholder-style="iptplsty3" @blur="iptblur(3)" placeholder="请填写付款金额" />
					</u-form-item>
					<u-form-item label="返款金额">
						<u-input v-model="form.refund_price" :placeholder-style="iptplsty4" @blur="iptblur(4)" placeholder="请填写返款金额" />
					</u-form-item>
					<u-form-item label="返款链接">
						<u-input v-model="form.refund_url" :placeholder-style="iptplsty5" @blur="iptblur(5)" placeholder="请填写返款返款链接" />
					</u-form-item>
					<u-form-item label="返款时间">
						<view v-if="form.refund_time === ''" style="color: #dfdfdf;width: 100%;" @click="show3 = true">点击选择时间</view>
						<view v-else style="color: #000000;width: 100%;" @click="show3 = true">{{ form.refund_time }}</view>
					</u-form-item>
					<u-button type="primary" shape="circle" @click="doaddgoods">提交</u-button>
				</u-form>
			</view>
		</u-popup>
		<u-calendar v-model="show3" :mode="mode" @change="timechange" :max-date="maxdate"></u-calendar>
		<u-toast ref="uToast" />
		<view class="surbtns"><u-icon name="setting" :size="60" color="#3cb371" @click="show = true"></u-icon></view>
		<el-dialog :visible.sync="dialogVisible"><img width="100%" :src="dialogImageUrl" alt="" /></el-dialog>
	</view>
</template>

<script>
export default {
	data() {
		return {
			page: 1,
			max_page: 2,
			status: 'loadmore',
			action: 'https://app.letuilm.com/api/upload',
			fileList: [],
			file: [],
			mode: 'date',
			iptplsty: 'color: #dfdfdf',
			iptplsty2: 'color: #dfdfdf',
			iptplsty3: 'color: #dfdfdf',
			iptplsty4: 'color: #dfdfdf',
			iptplsty5: 'color: #dfdfdf',
			form: {
				title: '',
				goods_url: '',
				payment_price: '',
				refund_price: '',
				refund_url: '',
				refund_time: ''
			},
			show: false,
			show2: false,
			show3: false,
			list: [
				{
					name: '待返款'
				},
				{
					name: '可返款'
				},
				{
					name: '已返款'
				}
			],
			current: 0,
			goodsList: [
				// {
				// 	goods_url: 'http://img.letuilm.com/2020/09/9eb60b2020092817375098341.png',
				// 	payment_price: '50.00',
				// 	refund_price: '20.00',
				// 	refund_time: '2020-12-18 10:09:32',
				// 	refund_url: 'http://img.letuilm.com/2020/09/9eb60b2020092817375098341.png',
				// 	status: '可返款',
				// 	title: '返利商品标题'
				// }
			],
			search: '',
			maxdate: '',
			user_id: '',
			dialogImageUrl: '',
			dialogVisible: false,
			disabled: false
		};
	},
	onLoad() {},
	onShow() {
		this.user_id = uni.getStorageSync('userid');
	},
	onReachBottom() {
		this.status = 'loading';
		this.page = ++this.page;
		if (this.max_page < this.page || this.max_page == this.page) {
			this.status = 'nomore';
			return false;
		}

		this.getgoodslist(this.page);
	},
	onReady() {
		this.maxdate = this.$u.timeFormat(new Date().getTime() + 30 * 3600 * 24 * 1000 * 6, 'yyyy-mm-dd');

		// console.log(this.user_id);
		this.getgoodslist(1);
	},
	methods: {
		uploadedsuccess(response, file, fileList) {
			console.log(response, file, fileList);
			if (response.code === 200) {
				this.form.goods_url = '//' + response.data.url;
			}
		},
		doremove(file) {
			console.log(file);
			this.form.goods_url = '';
		},
		uploaded(data, index, lists, name) {
			// console.log(data, index, lists, name);
			this.form.goods_url = '//' + data.data.url;
		},
		doaddgoods() {
			this.$u.api
				.doaddgoods(this.form)
				.then(res => {
					// console.log(res);
					if (res.code === 200) {
						this.$refs.uToast.show({
							title: '新增成功',
							type: 'success'
						});
						this.show2 = false;
						this.show = false;
						this.form = {
							title: '',
							goods_url: '',
							payment_price: '',
							refund_price: '',
							refund_url: '',
							refund_time: ''
						};
						this.goodsList = [];
						this.getgoodslist(1);
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error'
						});
					}
				})
				.catch(err => {
					console.log(err);
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error'
					});
				});
		},
		dodel(id) {
			this.$u.api
				.dodel({
					id: id
				})
				.then(res => {
					// console.log(res);
					if (res.code === 200) {
						for (var i = 0; i < this.goodsList.length; i++) {
							if (this.goodsList[i].id === id) {
								this.goodsList.splice(i, 1);
							}
						}
						this.$refs.uToast.show({
							title: '删除成功',
							type: 'success'
						});
					}
				})
				.catch(err => {
					console.log(err);
				});
		},
		dosearch() {
			// console.log(this.search);
			this.getgoodslist(1);
		},
		getgoodslist(page) {
			this.$u.api
				.getfankuan({
					page: page,
					pagesize: 15,
					user_id: this.user_id,
					status: this.current,
					search: this.search
				})
				.then(res => {
					// console.log(res);
					if (res.code === 200) {
						this.goodsList.push(...res.data.data);
						this.page = res.data.page;
						this.max_page = res.data.max_page;
					}
				})
				.catch(err => {
					console.log(err);
				});
		},
		timechange(e) {
			// console.log(e);
			this.form.refund_time = e.result;
		},
		iptblur(val) {
			// console.log(val);
			switch (val) {
				case 1:
					if (this.form.title === '') {
						this.iptplsty = 'color: red';
					}
					break;
				case 2:
					if (this.form.goods_url === '') {
						this.iptplsty2 = 'color: red';
					}
					break;
				case 3:
					if (this.form.payment_price === '') {
						this.iptplsty3 = 'color: red';
					}
					break;
				case 4:
					if (this.form.refund_price === '') {
						this.iptplsty4 = 'color: red';
					}
					break;
				case 5:
					if (this.form.refund_url === '') {
						this.iptplsty5 = 'color: red';
					}
					break;
			}
		},
		change(index) {
			this.current = index;
			// console.log(index);
			this.goodsList = [];
			this.getgoodslist(1);
		}
	}
};
</script>

<style lang="less">
.index {
	.tabs {
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 999;
	}
	.lists {
		// height: calc(100vh - 280rpx);
		margin-top: 80rpx;
		.g_right {
			.fankuan {
				width: 350rpx;
				height: 40rpx;
				line-height: 40rpx;
				color: #fff;
				font-size: 24rpx;
				border-radius: 8rpx;
				text-align: left;
				padding: 0 15rpx;
				background: linear-gradient(45deg, #9000ff, #5e00ff);
			}
			.fukuan {
				width: 350rpx;
				height: 40rpx;
				line-height: 40rpx;
				color: #fff;
				font-size: 24rpx;
				border-radius: 8rpx;
				text-align: left;
				padding: 0 15rpx;
				background: linear-gradient(45deg, #ff9700, #ed1c24);
			}
			.money {
				width: 350rpx;
				height: 40rpx;
				line-height: 40rpx;
				background: #ffeee6;
			}
			.money {
				padding-left: 15rpx;
				height: 42rpx;
				overflow: hidden;
				font-size: 24rpx;
				border-top-right-radius: 50rpx;
				border-bottom-right-radius: 50rpx;
				.status {
					width: 122rpx;
					height: 48rpx;
					line-height: 42rpx;
					text-align: center;
					color: #ffffff;
					font-size: 24rpx;
					background-image: url(../../static/image/iconrigth.png);
					background-size: 100% 100%;
				}
				.elsestatus {
					width: 122rpx;
					height: 48rpx;
					line-height: 42rpx;
					text-align: center;
					color: #ffffff;
					font-size: 24rpx;
					border-top-right-radius: 50rpx;
					border-bottom-right-radius: 50rpx;
					background: #dfdfdf;
				}
			}
		}
	}
	.formbox {
		.title {
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 32rpx;
			text-align: center;
		}
	}
	.surbtns {
		position: fixed;
		top: 50%;
		right: 0;
		background-color: #ffffff;
		border-radius: 50%;
		padding: 15rpx;
		box-shadow: 4rpx 4rpx 12rpx rgba(0, 0, 0, 0.2);
		cursor: pointer;
	}
	/deep/.el-upload-dragger {
		width: 550rpx;
		height: 292rpx;
		.el-icon-upload {
			margin: 58rpx 0 !important;
		}
		.el-upload__text {
			line-height: 0;
		}
	}
	/deep/.el-upload {
		width: 550rpx;
		height: 292rpx;
	}
	/deep/.el-upload--picture-card {
		border: none;
		line-height: 0;
	}
	/deep/.el-upload-list--picture-card .el-upload-list__item{
		height: 100%;
		min-height: 292rpx;
	}
}
</style>
